<template>
    <div>
        <div class="footer-box">
            <div class="about">
                <ul>
                    <li>
                        <a href="javascript:;">客户端</a>
                    </li>
                    <li>
                        <a href="javascript:;">媒体报道</a>
                    </li>
                    <li>
                        <a href="javascript:;">合作推广</a>
                    </li>
                    <li>
                        <a href="javascript:;">关于我们</a>
                    </li>
                    <li>
                        <a href="javascript:;">加入我们</a>
                    </li>
                    <li>
                        <a href="javascript:;">场库名人堂</a>
                    </li>
                    <li>
                        <a href="javascript:;">更多友情连接</a>
                    </li>
                </ul>
            </div>
            <div class="tip">
                <ul>
                    <li>
                        <a href="javascript:;">Copyright © 2011-2018</a>
                    </li>
                    <li>
                        <a href="javascript:;">场库</a>
                    </li>
                    <li>
                        <a href="javascript:;">京ICP备14003808号-5</a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="https://www.vmovier.com/Public/Home/images/ba-icon.png?v=1602666514">
                            <span>京公网安备11010102002904号</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="https://www.vmovier.com/Public/static/creativecommons.png?v=1602666515">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"Footer",
}
</script>

<style lang="scss" scoped>
.footer-box{
    background-color: #222;
    font-size: 12px;
    padding: 30px 0;
    .about{
        display: flex;
        justify-content: center;
        ul{
            display: flex;
            align-items: center;
            li{
                margin-right: 18px;
                a{
                    color: #ccc;
                    &:hover{
                        color: #fff;
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .tip{
        display: flex;
        justify-content: center;
        margin-top: 10px;
        ul{
            display: flex;
            align-items: center;
            li{
                margin-right: 20px;
                a{
                    color: #ccc;
                    &:hover{
                        color: #fff;
                        text-decoration: underline;
                    }
                }
            }
            li:nth-child(4){
                a{
                    img{
                        vertical-align: middle;
                    }
                    span{
                        vertical-align: middle;
                        padding-left: 4px;
                    }
                }
            }
            li:nth-child(5){
                a{
                    img{
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}
</style>